<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1>{{myTitle}}</h1>
    <yeye></yeye>
</div>

<script>
    //组件就是自己创建标签， Vue.component(组件名，组件实例),注意：写在Vue实例化之前

    //子组件
    Vue.component('child-content',{
        //组件的html模板
        template:`
            <div :style="borderCss">
                <p>我是子组件</p>
                <p>{{chuanCan}}</p>
            </div>
        `,
        //data里return的对象是该组件存放数据的地方，等同于vue实例上的data，这里用函数返回是因为函数返回的是一个独立的对象
        data(){
            return{
                borderCss:{
                    fontsize:'18px',
                    color:'pink',
                    padding:'10px 10px',
                    textAlign:'center',
                }
            }
        },
        methods:{
            clickZan(){
                this.count++;
            }
        },
        props:['chuanCan'],   //父组件向子组件里面传递参数，props父子传递（不可直接爷孙传递，只能一级一级传）
        //注意此处的'chuanCan'与父组件ui-btn中使用此子组件时的 :chuanCan="myContent" 属性名一致
    });

    //父组件
    Vue.component('ui-btn',{
        //组件的html模板
        template:`
            <div :style="borderCss">
                <h4>我是父组件</h4>
                <child-content :chuanCan="myContent"></child-content>
                <div>
                    <p>点赞数：{{count}}</p>
                    <button @click="clickZan">点赞</button>
                </div>
            </div>
        `,
        //data里return的对象是该组件存放数据的地方，等同于vue实例上的data，这里用函数返回是因为函数返回的是一个独立的对象
        data(){
            return{
                count:0,
                borderCss:{
                    border:'1px solid pink' ,
                    fontsize:'18px',
                    padding:'10px 30px',
                    float: 'left',
                    margin:'10px',
                },
                myContent:'父组件向子组件传递的内容',
            }
        },
        methods:{
            clickZan(){
                this.count++;
                this.$emit('showCount',1);   //将本次点赞传递给本组件的父组件
            }
        },
    });

    //爷爷组件
    Vue.component('yeye',{
        //组件的html模板
        template:`
            <div :style="myCss">
                <h4>总赞数：{{allCount}}</h4>
                <ui-btn @showCount="getCount"></ui-btn>
                <ui-btn @showCount="getCount"></ui-btn>
                <ui-btn @showCount="getCount"></ui-btn>
                <ui-btn @showCount="getCount"></ui-btn>
            </div>
        `,
        //data里return的对象是该组件存放数据的地方，等同于vue实例上的data，这里用函数返回是因为函数返回的是一个独立的对象
        data(){
            return{
                allCount:0,
                myCss:{
                    width:'100%',
                    height:'500px',
                },
            }
        },
        methods:{
            getCount(newCount){    //子组件点赞触发showCount事件，事件触发执行本方法，参数newCount就是子组件传递过来的1
                this.allCount=this.allCount+newCount;
            }
        },
    });

    let app = new Vue({
        el:'#app',
        data:({
            myTitle:'我的页面',
        })
    });

</script>
</body>
</html>